<template>
  <div class="main">
    <h2 class="detail-title">试卷基本信息</h2>
    <div class="detail-info">
      <div class="detail-item">ID：{{data.id}}</div>

      <div class="detail-item">试卷名称：{{data.exam_name}}</div>

      <div class="detail-item">已开课程：{{data.course_name}}</div>

      <div class="detail-item">考试时间：{{data.start_time}}</div>

      <div class="detail-item">用户学号：{{data.studentid}}</div>

      <div class="detail-item">用户名：{{data.username}}</div>
    </div>

    <div class="exam">
      <div class="exam-con">
        <h3>试卷内容</h3>
        <h4>一、选择题（共{{choice.length}}题，总共{{choice_score}}分）</h4>
        <div class="common-ques" v-for="(item, i) in choice" :key="item.question_type + i" >
          <div class="ques">
            <div class="ques-con">
              <span>{{i+1}}、</span>
              <span>{{item.content}}({{item.question_type == 'MC' ? '单选' : '多选'}})</span>
            </div>
            <div class="ques-score">
              <span>分值：</span>
              <el-input readonly v-model="item.score" class="ques-score-value"></el-input>
            </div>
          </div>
          <div class="ques-anser">
            <div v-for="(choice, index_choice) in item.choices" :key="'choice' + index_choice" class="mc-radio">
              <el-radio v-model="item.user_ans" :label="choice.item" >
                {{choice.item}}、{{choice.con}}
              </el-radio>
            </div>
          </div>
        </div>
        <h4>二、判断题（共{{true_or_false.length}}题，总共{{tf_score}}分）</h4>
        <div class="common-ques" v-for="(item, i2) in true_or_false" :key="item.question_type + i2" >
          <div class="ques">
            <div class="ques-con">
              <span>{{i2+1}}、</span>
              <span>{{item.content}}</span>
            </div>
            <div class="ques-score">
              <span>分值：</span>
              <el-input readonly v-model="item.score" class="ques-score-value"></el-input>
            </div>
          </div>
          <div class="ques-anser">
            <div class="mc-radio">
              <el-radio v-model="item.user_ans" label="A" > A、对 </el-radio>
              <el-radio v-model="item.user_ans" label="B"> B、错 </el-radio>
            </div>
          </div>
        </div>
        <h4>三、填空题（共{{fill_blank.length}}题，总共{{blank_score}}分）</h4>
        <div class="common-ques" v-for="(item, i3) in fill_blank" :key="item.question_type + i3" >
          <div class="ques">
            <div class="ques-con">
              <span>{{i3+1}}、</span>
              <span>{{item.content}}</span>
            </div>
            <div class="ques-score">
              <span>分值：</span>
              <el-input readonly v-model="item.score" class="ques-score-value"></el-input>
            </div>
          </div>
          <div class="ques-anser">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="item.user_ans">
            </el-input>
          </div>
        </div>
        <h4>四、简答题（共{{short_answer.length}}题，总共{{answer_score}}分）</h4>
        <div class="common-ques" v-for="(item, i4) in short_answer" :key="item.question_type + i4" >
          <div class="ques">
            <div class="ques-con">
              <span>{{i4+1}}、</span>
              <span>{{item.content}}</span>
            </div>
            <div class="ques-score">
              <span>分值：</span>
              <el-input readonly v-model="item.score" class="ques-score-value"></el-input>
            </div>
          </div>
          <div class="ques-anser">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="item.user_ans">
            </el-input>
          </div>
        </div>
      </div>
      <div class="ans-card">
        <div class="reverse-time">
          <div class="card-name">答题卡</div>
          <div class="time">剩余时间：{{lastTime}}</div>
        </div>
        <div class="ques-card-title">
          <span>选择题</span>
          <span>共{{choice.length}}题</span>
        </div>
        <div class="ques-card-items">
          <span :class="item.user_ans ? 'did' : 'undo'" v-for="(item, i) in choice" :key="'mc_card' + i">{{i+1}}</span>
        </div>
        <div class="ques-card-title">
          <span>判断题</span>
          <span>共{{true_or_false.length}}题</span>
        </div>
        <div class="ques-card-items">
          <span :class="item.user_ans ? 'did' : 'undo'" v-for="(item, i) in true_or_false" :key="'mc_card' + i">{{i+1}}</span>
        </div>
        <div class="ques-card-title">
          <span>填空题</span>
          <span>共{{fill_blank.length}}题</span>
        </div>
        <div class="ques-card-items">
          <span :class="item.user_ans ? 'did' : 'undo'" v-for="(item, i) in fill_blank" :key="'mc_card' + i">{{i+1}}</span>
        </div>
        <div class="ques-card-title">
          <span>简答题</span>
          <span>共{{short_answer.length}}题</span>
        </div>
        <div class="ques-card-items">
          <span :class="item.user_ans ? 'did' : 'undo'" v-for="(item, i) in short_answer" :key="'mc_card' + i">{{i+1}}</span>
        </div>
      </div>
    </div>
    
    <el-button class="go-back-btn" @click="onSubmit" type="primary">提 交</el-button>
  </div>
</template>
<script>
import { examModel } from "@/api/models";
export default {
  mixins: [],
  components: {},
  data() {
    return {
      data: {},
      id: null,
      choice: [
        {
          content: "下面这些 Element 上的方法，有哪些是支持传入一个选择器作为参数的？",
          question_type: "MC",
          score: 6,
          id: "001",
          user_ans: '',
          choices: [
            {
              item: "A",
              con: "Element.prototype.querySelector()"
            },
            {
              item: "B",
              con: "Element.prototype.querySelector()"
            },
            {
              item: "C",
              con: "Element.prototype.querySelector()"
            },
            {
              item: "D",
              con: "Element.prototype.querySelector()"
            }
          ]
        },
        {
          content: "下面这些 Element 上的方法，有哪些是支持传入一个选择器作为参数的？",
          question_type: "MA",
          score: 6,
          id: "001",
          user_ans: '',
          choices: [
            {
              item: "A",
              con: "Element.prototype.querySelector()"
            },
            {
              item: "B",
              con: "Element.prototype.querySelector()"
            },
            {
              item: "C",
              con: "Element.prototype.querySelector()"
            },
            {
              item: "D",
              con: "Element.prototype.querySelector()"
            }
          ]
        }
      ],
      choice_score: 30,
      true_or_false: [
        {
          content: "下面这些 Element 上的方法，是否为正确？",
          question_type: "TF",
          score: 3,
          id: "001",
          user_ans: null
        }
      ],
      tf_score: 15,
      fill_blank: [
        {
          content: "下面这些 ()上的方法，有()是支持传入一个选择器作为参数的？",
          question_type: "BL",
          score: 3,
          id: "001",
          user_ans: ''
        }
      ],
      blank_score: 15,
      short_answer: [
        {
          content: "下面这些 Element 上的方法，有哪些是支持传入一个选择器作为参数的，请作出简短回答",
          question_type: "SA",
          score: 10,
          id: "001",
          user_ans: ''
        }
      ],
      answer_score: 40,
      lastTime: "00:59:00"
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    this.getItem();
  },
  methods: {
    getItem() {
      examModel.item(this.id, (res) => {
        // MC:单选题 MA:多项选择题 TF:判断题 BL:填空题 SA：简答题
        this.data = res.data;
        this.interval = setInterval( this.onReverseTime, 1000);
      });
    },
    onSubmit() {
      console.log('submit')
    },
    onReverseTime() {
      let endTime = new Date(Date.parse(this.data.start_time) + this.data.duration * 60000).getTime()/1000;
      let now = new Date().getTime()/1000;
      let h = parseInt((endTime - now) / 3600);
      let m = parseInt((endTime - now - h * 3600) / 60);
      let s = parseInt(endTime - now - h * 3600 - m * 60);
      let deal = (h) => {
        if(h<0){
          h = '00';
        }else if(h<10) {
          h = '0' + h
        }else 
          h = String(h)
        return h
      }
      h = deal(h);
      m = deal(m)
      s = deal(s)
      this.lastTime = h + ':' + m + ':' + s;
      if (this.lastTime == '00:00:00') {
        clearInterval(this.interval)
      }
    }
  },
};
</script>
<style lang="scss">
  .go-back-btn{
    margin-bottom: 30px;
  }
  .exam{
    min-height: 50px;
    display: flex;
  }
  .exam-con{
    border: 1px solid #cccccc;
    padding: 20px 15px;
    width: 60%;
    text-align: left;
  }
  .exam-con h3{
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }
  .ans-card{
    width: 30%;
    border: 1px solid #cccccc;
    margin-left: 5%;
  }
  .exam-con h4{
    margin-top: 20px;
  }
  .common-ques{
    margin-top: 15px;
  }
  .ques{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .ques .ques-con{
    display: flex;
    align-items: center;
    width: 65%;
  }
  .ques-con span:first-child{
    font-weight: bold;
  }
  .ques-score{
    display: flex;
    align-items: center;
    width: 30%;
  }
  .ques-score .ques-score-value{
    width: 50px !important;
  }
  .mc-radio{
    margin-left: 20px;
    margin-top: 10px;
  }
  .ques-anser{
    width: 80%;
    margin-left: 20px;
  }
  .ques-anser .el-textarea{
    margin-top: 10px;
  }
  .reverse-time{
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #dddddd;
  }
  .reverse-time .card-name{
    width: 33%;
    font-size: 20px;
    color: #ffffff;
    background-color: #409EFF;
    padding: 10px 0;
  }
  .reverse-time .time{
    width: 67%;
    height: 100%;
    font-size: 16px;
    color: red;
  }
  .ques-card-title{
    margin-top: 20px;
    border-bottom: 1px solid #cccccc;
    display: flex;
    justify-content: space-between;
    width: 80%;
    padding: 0 5%;
    margin-left: 5%;
  }
  .ques-card-items{
    margin: 0 auto;
    margin-top: 20px;
    width: 80%;
    display: flex;
    justify-content: flex-start;
  }
  .ques-card-items span{
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
  }
  .ques-card-items .did{
    background-color: green;
    border: 1px solid green;
    color: #ffffff;
  }
  .ques-card-items .undo{
    border: 1px solid #000000;
  }
</style>